<!DOCTYPE html>
<head>
    <title>我的第三个vue程序</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link href="../css/style.css" rel="stylesheet"> </head>
</head>
<body>
    <h1>class与style绑定</h1>

    <h4>对象语法</h4>
    <div id="d1" class="static" v-bind:class="{'active':isActive,'text-danger':hasError}">11111111</div>
  
    <div id="d12" class="static" v-bind:class="classObject">2222222</div>
    <br/>
 
    <h4>数组语法</h4>
    <div id="d2" v-bind:class="[activeClass,errorClass]">33333333</div>
    <br/>

    <my-component class="baz boo"></my-component>

    <div id="d3" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">44444</div>
    <div id="d4" v-bind:style="styleObject">5555</div>

    <p>--------------------------------------</p>
    <div id="d5" >
        <p v-if="awsome">vue is awesome!"</p>
        <p v-else>oh no 😢</p>
    </div>

    <p>-----------------v-if 使用---------------------</p>
    <template id="d52" v-if="ok">
        <p>title</p>
        <p>paragraph 1</p>
        <p>paragraph 2</p>
    </template>

    <p>-----------------v-if,v-else 使用---------------------</p>
    <div id="d53" v-if="Math.random() > 0.5">
        Now you see me
      </div>
      <div v-else>
        Now you don't
      </div>

    <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username"/>
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address"/>
    </template>
    
    <p>-----------------v-show使用---------------------</p>
    <p id="p1" v-show="ok">Hello!</p>



    

</body>
<script>
    //当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 "static active text-danger"。
    //对象语法1
    var vm1 = new Vue({
        el:'#d1',
        data:{
            isActive:true,
            hasError:false
        }
    })
    //对象语法2
    var vm2 = new Vue({
        el:'#d12',
        data:{
            classObject:{
                active: true,
            }
        }
    })
    //数组语法
    var vm3 = new Vue({
        el:'#d2',
        data:{
            activeClass: 'active',
            errorClass: 'text-danger'
        }
    })


    Vue.component('my-component', {
     template: '<p class="foo bar">Hi</p>'
    })

    //绑定内联样式
    var vm4 = new Vue({
        el:'#d3',
        data:{
            activeColor: 'red',
            fontSize: 30
        }
    })
    var vm4 = new Vue({
        el:'#d4',
        data:{
            styleObject:{
                color: 'red',
                fontSize: '13px'
            }
        }
    })


    var vm5 = new Vue({
        el:'#d5',
        data:{
            awsome:false
        }
    })


    var vm52 = new Vue({
        el:'#d52',
        data:{
            ok:true
        }
    })

    var vm53 = new Vue({
        el:'#d53',
        data:{
            
        }
    })

    var vmp1 = new Vue({
        el:'#dp1',
        data:{
            ok:true
        }
    })
</script>
</html>